<template>
  <div class="container">
    <!-- 选择问题场景 -->
    <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <div v-if="list.length" class="radio-between mb15">
        <div class="page-block">请选择遇到的问题</div>
        <van-radio-group v-model="formData.scene_id" v-if="list.length">
          <van-cell
            v-for="(item, key) in list"
            v-bind:key="key"
            :title="item.name"
            clickable
            @click="formData.scene_id = item.id"
          >
            <van-radio :name="item.id" checked-color="#ff6600" />
          </van-cell>
        </van-radio-group>
      </div>
    </van-list>
    <!-- 反馈表单 -->
    <div v-if="finished">
      <van-cell-group>
        <van-field
          v-model="formData.content"
          type="textarea"
          placeholder="在这里描述下您的问题吧..."
          rows="1"
          :autosize="{ maxHeight: 300, minHeight: 200 }"
        />
      </van-cell-group>

      <van-cell-group class="mt10">
        <van-field v-model="formData.mobile" label="联系方式" placeholder="请输入手机号" />
      </van-cell-group>
      <div class="space-action">
        <van-button type="danger" block @click="submit">提交</van-button>
      </div>
      <div class="tips">
        <p>我们会及时处理您的反馈，并第一时间给您回复</p>
        <p>
          您还可以发送邮件至
          <a href="mailto:youyuedingzhi@163.com">youyuedingzhi@163.com</a>，或拨打客服电话
          <a href="tel:0537-2569688">0537-2569688</a>。
        </p>
      </div>
    </div>
    <blank v-model="tips" title="反馈成功" />
  </div>
</template>
<script>
import {
  Cell,
  Field,
  CellGroup,
  List,
  Button,
  RadioGroup,
  Radio,
  DatetimePicker,
  Popup
} from 'vant'
import Blank from '../../components/abnor/blank'

export default {
  components: {
    [Cell.name]: Cell,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [List.name]: List,
    [Button.name]: Button,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
    Blank
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      show: true,
      error: false,
      errorTips: '',
      radio: '',
      //
      formData: {
        scene_id: 0,
        message: '',
        mobile: ''
      },
      //
      tips: false
    }
  },
  watch: {
    radio: {
      handler (curVal, oldVal) {
        this.formData.scene_id = curVal
      },
      deep: true
    },
    currentDate: {
      handler (curVal, oldVal) {
        console.log('当前编辑状态：', curVal)
        console.log('之前编辑状态：', oldVal)
      },
      deep: true
    }
  },
  computed: {
    ttt () {
      return ''
    }
  },
  methods: {
    onLoad () {
      let id = this.$route.params.id
      this.axios
        .get('/app/feedback/view', {
          params: { id: id },
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          if (data && data.length > 0) {
            this.list = data
            this.radio = data[0].id
          }
          this.loading = false
          this.finished = true
        })
        .catch(error => {
          console.log(error.data.message)
          console.log('处理逻辑出错')
          this.loading = false
          this.finished = true
          this.error = true
        })
    },
    onFeedback () {
      this.$router.push({ name: 'feedback' })
    },
    submit () {
      this.axios
        .post('app/feedback/create', this.formData)
        .then(response => {
          this.tips = true
          // this.$router.replace({ name: 'feedback/success' })
        })
        .catch(error => {
          console.log(error)
          this.$toast(error.data.message)
        })
    }
  }
}
</script>
